<template>
    <div class="file-loader-container">
        <div
            :class="{ active: isDragover }"
            @drop.prevent="handleDrop"
            @dragover.prevent="isDragover = true"
            @dragleave="isDragover = false"
            @dragend="isDragover = false"
            class="draggable-area"
        >
            拖拽到该区域
        </div>
        <div class="btns">
            <UploadBtn
                :isMultiple="true"
                @receiveFileList="receiveFileList"
                btnName="文件上传"
            />
            <UploadBtn
                :isSupportDir="true"
                @receiveFileList="receiveDirList"
                btnName="文件夹上传"
            />
            <button class="sure">确定上传</button>
        </div>
        <div class="table">
            <div class="row head">
                <div class="col" v-for="(item, index) in headList" :key="index">
                    {{ item }}
                </div>
            </div>
            <div class="scroll-area">
                <div class="row" v-for="(item, index) in fileList" :key="index">
                    <div :title="item.name" class="col">{{ item.name }}</div>
                    <div :title="item.path" class="col">{{ item.path }}</div>
                    <div class="col">{{ item.type }}</div>
                    <div class="col">{{ item.size }}</div>
                    <div class="col" @click="deleteFile(index)">
                        <span title="你可想好了" class="delete-btn">删除</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<style lang="less" scoped>
@import "~@/styles/mixins.less";
.file-loader-container {
    .self-center();
    width: 800px;
    padding: 10px;
    border-radius: 20px;
    box-shadow: 4px 4px 5px rgba(0, 0, 0, 0.322);
    display: flex;
    flex-direction: column;
    row-gap: 20px;
    align-items: center;
    font-family: "楷体" !important;
    background-color: #fff;
    .draggable-area {
        border: 2px dotted rgb(149, 139, 139);
        border-radius: 30px;
        width: 400px;
        height: 300px;
        text-align: center;
        line-height: 300px;
        &.active {
            border: 2px solid rgb(66, 66, 188);
        }
    }
    .table {
        width: 100%;
        display: flex;
        flex-direction: column;
        padding: 0 5px;
        box-sizing: border-box;
        .scroll-area {
            height: 200px;
            overflow-y: auto;
            width: 100%;
            padding-right: -10px;
        }
        .head {
            border-top: 1px solid rgba(128, 128, 128, 0.605);
            border-bottom: 1px solid rgba(128, 128, 128, 0.605);
        }
        .row {
            width: 100%;
            height: 40px;
            display: flex;
            column-gap: 5px;
            .col {
                width: 150px;
                height: 100%;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                text-align: center;
                line-height: 40px;
                .delete-btn {
                    display: inline-block;
                    background-color: red;
                    color: #fff;
                    border-radius: 5px;
                    width: 50px;
                    height: 25px;
                    line-height: 25px;
                    text-align: center;
                    user-select: none;
                    cursor: pointer;
                    &:hover {
                        opacity: 0.7;
                    }
                }
            }
        }
    }
    .btns {
        display: flex;
        column-gap: 10px;
        .sure {
            width: 100px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            border-radius: 10px;
            cursor: pointer;
            background: red;
            border: none;
            color: #fff;
            &:hover {
                opacity: 0.7;
            }
        }
    }
}
</style>
<script>
import UploadBtn from "./UploadBtn.vue";
export default {
    components: {
        UploadBtn,
    },
    data() {
        return {
            headList: ["文件名", "文件路径", "文件类型", "文件大小", "操作"],
            fileList: [],
            isDragover: false,
        };
    },
    methods: {
        //添加文件列表
        addFileList(fakeFileList) {
            Array.from(fakeFileList).forEach((file) => this.addFile(file));
        },
        //添加文件
        addFile(file) {
            this.fileList.push({
                name: file.name,
                size: this.switchSize(file.size),
                type: file.type,
                path: file.webkitRelativePath || file.path,
            });
        },
        //拖拽结束添加信息
        handleDrop(e) {
            this.isDragover = false;
            for (const item of e.dataTransfer.items) {
                this.getFileByEntry(item.webkitGetAsEntry());
            }
        },
        //通过入口获取file
        getFileByEntry(entry, path = "") {
            //判别当前传入的是文件还是文件夹
            if (entry.isFile) {
                //文件则通过file函数回调拿到file对象
                entry.file((file) => {
                    file.path = path + file.name;
                    this.addFile(file);
                });
            } else {
                //如果当前entry是文件夹，那么创建一个reader，阅读目录，提取内部目录
                const reader = entry.createReader();
                console.log(entry);
                reader.readEntries((entries) => {
                    for (const item of entries) {
                        //是文件夹，所以可以从entry里边拿到该文件夹的名字，为后边拼接内部文件路径使用
                        this.getFileByEntry(item, path + entry.name);
                    }
                });
            }
        },
        //转换文件大小
        switchSize(byte) {
            let kb = (byte / 1024).toFixed(1);
            let mb = (kb / 1024).toFixed(1);
            let gb = (mb / 1024).toFixed(1);
            if (kb < 1024) {
                return kb + "K";
            } else if (mb < 1024) {
                return mb + "M";
            } else {
                return gb + "G";
            }
        },
        //接收文件列表
        receiveFileList(fileList) {
            this.addFileList(fileList);
        },
        //接收文件夹文件列表
        receiveDirList(dirList) {
            this.addFileList(dirList);
        },
        //删除文件
        deleteFile(index) {
            this.fileList.splice(index, 1);
        },
    },
};
</script>
